<template>
    <div class="box">
        <div v-if="data.tabType == 1">
            <div class="imgbox" v-if="data.data.length > 0">
                <img :src="data.data[0].url" :style="{ height: data.data[0].height + 'px' }" class="type1"
                    mode="aspectFill" @click="toUrl(data.data[0].link)" />
            </div>
            <div v-else>
                <div class="image-null"><span class="el-icon-picture"></span></div>
            </div>
        </div>
        <div v-if="data.tabType == 2">
            <div class="booking" :style="{ 'background-color': data.titlebgcolor }">
                <div class="title">
                    <div class="left"
                        :style="{ color: data.titlecolor, 'font-weight': data.radio == 1 ? 'bold' : '400' }">{{
                            data.title || '生活团购' }} </div>
                    <div class="right">更多</div>
                </div>
                <div class="center" :style="{ backgroundColor: data.cardBgColor }">
                    <div class="left">
                        <div class="list" v-for="(it, index) in list" :key="index">
                            <div class="item">
                                <img :src="it.img" alt="">
                                <div class="txt">
                                    <div class="title" v-if="data.showTitle == 1 ? true : false">{{ it.productName }}
                                    </div>
                                    <div class="inst">
                                        <div :style="{ color: data.color }"> ￥{{ it.goodRatio }} </div>
                                        <div class="proprice">{{ it.productPrice }}</div>
                                    </div>
                                    <div class="money" v-if="data.price">9.9</div>
                                </div>
                                <div class="btn" round>点击参团</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div v-if="!data.tabType">
            <div class="image-null"><span class="el-icon-picture"></span></div>

        </div>

    </div>
</template>
<script>
import { color } from 'echarts';

export default {
    name: "GroupBooking",
    props: {
        type: {
            type: [String, Number],
            default: 1
        },
        data: {
            type: Object,
            default: () => { }
        },

    },
    watch: {
        data: {
            handler(newData, oldData) {
                // 检查 tabType 是否发生了变化
            },
            // 开启深度监听
            deep: true
        },

    },

    data() {
        return {
            list: [
                {
                    "productId": 3601,
                    "productName": "驼大大新疆正宗骆驼奶粉初乳骆驼乳粉蓝罐礼盒装120g*4罐",
                    "img": "https://img.quanminyanxuan.com/excel/f6860885547648d9996474bbf21fdca9.jpg",
                    "productPrice": 299,
                    "originalPrice": 598,
                    "volumeStr": "741",
                    "goodRatio": 98
                },
                {
                    "productId": 3268,
                    "productName": "百合28件套新骨质瓷餐具",
                    "img": "https://img.quanminyanxuan.com/excel/185e7365f65543f2b4ebc67036d6a78f.jpg",
                    "productPrice": 370,
                    "originalPrice": 1388,
                    "volumeStr": "400",
                    "goodRatio": 99
                },
                {
                    "productId": 3601,
                    "productName": "驼大大新疆正宗骆驼奶粉初乳骆驼乳粉蓝罐礼盒装120g*4罐",
                    "img": "https://img.quanminyanxuan.com/excel/f6860885547648d9996474bbf21fdca9.jpg",
                    "productPrice": 299,
                    "originalPrice": 598,
                    "volumeStr": "741",
                    "goodRatio": 98
                },
                {
                    "productId": 3268,
                    "productName": "百合28件套新骨质瓷餐具",
                    "img": "https://img.quanminyanxuan.com/excel/185e7365f65543f2b4ebc67036d6a78f.jpg",
                    "productPrice": 370,
                    "originalPrice": 1388,
                    "volumeStr": "400",
                    "goodRatio": 99
                },
            ],
        }
    },
    mounted() {


    },
    methods: {

    }
};
</script>
<style scoped lang="scss">
.image-null {
    background: #ffffff;
    height: 200px;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c1c1c1;
    width: 100%;
}

.box {
    padding: 10px;


    .type1 {
        width: 100%;
        height: auto;
        border-radius: 0px 0px 0px 0px;
    }

    .booking {
        height: 200px;
        padding: 10px;
        width: 100%;
        background-color: #fff;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            color: #000;

            .left {}

            .right {
                font-size: 12px;
                color: #ccc;
            }
        }

        .center {
            display: flex;
            justify-content: space-between;
            padding: 10px;
            border-radius: 4px;

            .left,
            .right {

                display: flex;
                justify-content: space-around;
                width: 100%;

                .list {
                    border-radius: 5px;



                    img {
                        width: 60px;
                        height: 60px;
                        border-radius: 5px;
                        overflow: hidden;
                        margin-right: 10px;
                    }

                    .txt {
                        margin-top: 10px;
                        width: 60px;

                        .title {
                            width: 60px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            font-size: 12px;
                        }

                        .inst {
                            color: red;
                            font-size: 16px;
                            font-weight: bold;
                            display: flex;


                            .proprice {
                                font-size: 12px;
                                color: #ccc;
                                text-decoration: line-through;
                                display: flex;
                                justify-content: flex-end;
                                align-items: flex-end;
                                margin-left: 5px;
                            }

                        }

                        .money {
                            color: #ccc;
                            font-size: 12px;
                            text-decoration: line-through
                        }
                    }

                    .btn {
                        padding: 3px 5px;
                        background-color: #fc2326;
                        color: #fff;
                        border-radius: 10px;
                        font-size: 12px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-top: 5px;
                    }
                }
            }
        }


    }

}
</style>